<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" th:href="@{/Ui/layui-v2.6.4/layui/css/layui.css}">
    <link rel="stylesheet" th:href="@{/Ui/bootstrap/css/bootstrap.css}">
    <link rel="stylesheet" th:href="@{/admin/css/login.css}">
    <title>login</title>
</head>
<body>

<div class="row">
    <div class="col-xs-4 col-xs-offset-4 formItems">
        <div style="margin-top: 10px;text-align: center">
            <span class="fontUser">个人博客</span>
        </div>


        <form class="layui-form" action="/login" method="post">
            <div class="layui-form-item ">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-inline">
                    <input type="text" required name="username"  lay-reqtext="用户名是必填项，岂能为空？"
                           placeholder="请输入" autocomplete="off" class="layui-input input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">密码</label>
                <div class="layui-input-inline">
                    <input type="password" required name="password" placeholder="请输入密码" autocomplete="off" class="layui-input input">
                </div>
            </div>

            <div class="layui-form-item">
                <div class="row">
                    <div class="col-xs-8">
                        <label class="layui-form-label">验证码</label>
                        <div class="layui-input-inline">
                            <input type="text" name="code" required lay-verify="required" lay-reqtext="验证码是必填项，岂能为空？"
                                   placeholder="请输入" autocomplete="off" class="layui-input input">
                        </div>
                    </div>

                    <div class="col-xs-4">
                        <img alt="单击图片刷新！" class="pointer" th:src="@{/kaptcha}"
                             onclick="this.src='/kaptcha?d='+new Date()*1" style="width: 110px;height: 35px;background: #ffffff">
                    </div>

                </div>
                <div th:text="${errMsg}"  class="text-danger"></div>
                <div th:text="${session.errMsg}"  class="text-danger"></div>
            </div>
            <div style="text-align: center">
                <input type="submit" class="btn btn-info" style="width: 100px" value="登录">
            </div>
        </form>

    </div>
</div>


<script>
    layui.use('form', function () {
        var form = layui.form;
        form.verify({
            title: function(value){
                if(value.length < 5){
                    return '标题至少得5个字符啊';
                }
            }
            ,pass: [
                /^[\S]{6,12}$/
                ,'密码必须6到12位，且不能出现空格'
            ]
            ,content: function(value){
                layedit.sync(editIndex);
            }
        })
    });
</script>


<script th:src="@{/Ui/layui-v2.6.4/layui/layui.js}"></script>
<script th:src="@{/Ui/bootstrap/js/bootstrap.js}"></script>
</body>
</html>